<template>
	<view class="content">
		<view class="app-title ac">
			<view class="fl" @click="back">
				<image class="back" src="/static/img/back.png"></image>
			</view>应急处理指南列表
			<!-- <text class="fr"><image class="more" src="/static/img/more.png"></image></text> -->
		</view>

		<view class="my-work ac">
			<view class="fl menu ac"><view :class="{on:tab == 0}" @click="setTab(0)"><b>故障内容</b></view><view
					class="num ac" v-show="tab == 0 && total > 0">{{total>99 ? '99+':total}}</view></view>
			<view class="fl menu ac"><view :class="{on:tab == 1}" @click="setTab(1)"><b>个人收藏</b></view><view
					class="num ac" v-show="tab == 1 && total > 0">{{total>99 ? '99+':total}}</view></view>
			<view class="fl menu ac" @click="show_search = true"><view>筛选<image class="select"
						src="/static/img/select.png"></image></view></view>

			<view class="clearfix"></view>
		</view>

		<view class="work-item">
			<view class="item" v-for="(item,index) in list" :key="index">
				<view class="fl" @click="jumpUrl(item.armcode)">{{item.armcontent}}</view>
				<view class='flex' @click="setCollect(index,item.iscollection,item.armcode)">
					<image v-show="item.iscollection == 1" mode='aspectFit' class="icon" src="/static/img/collect_active.png"></image>
					<image v-show="item.iscollection == 0" mode='aspectFit' class="icon" src="/static/img/collect.png"></image>
					<image v-show="tab == 1" mode='aspectFit' class="icon" src="/static/img/collect_active.png"></image>
					<view v-if="tab == 0">{{item.iscollection == 1 ? '已收藏' : '未收藏'}}</view>
					<view v-else>已收藏</view>
				</view>
			</view>
			<!-- <view class="item" @click="jumpUrl('')">
				<text class="fl">ACS链接状态异常</text>
				<view class='flex'>
					<image mode='aspectFit' class="icon" src="/static/img/collect_active.png"></image>
					<text>取消收藏</text>
				</view>
			</view>
			<view class="item" @click="jumpUrl('')">
				<text class="fl">运行方向采集故障</text>
				<view class="flex" >
					<image mode='aspectFit' class="icon" src="/static/img/collect.png"></image>
					<text>收藏</text>
				</view>
			</view> -->
		</view>

		<MyEmergencyDrawer v-show="show_search" @closeFull="closeFull"></MyEmergencyDrawer>
	</view>
</template>

<script>
	import MyEmergencyDrawer from '../../components/myEmergency/myEmergencyDrawer'
	export default {
		components: {
			MyEmergencyDrawer
		},
		data() {
			return {
				tab: 0,
				start: '',
				end: '',
				list : [],
				search_list : {
					armContent:'',
					equTypeId:'',
					page : 0,
					personId : this.getUserId()
				},
				total : 0,
				flog : true,
				show_search: false
			}
		},
		onReachBottom() {
			if(!this.flog) return uni.showToast({title:'已无最新数据',icon:'none'});
			this.initList();
		},
		created() {
			this.initList();
		},
		methods: {
			back() {
				uni.navigateBack();
			},
			setTab(i) {
				if (this.tab == i) return;
				this.tab = i;
				this.flog = true;
				this.search_list.page = 0;
				this.list = [];
				this.initList();
			},
			closeFull(obj) {
				if (obj) {
					this.search_list.equTypeId = obj.id;
					this.search_list.armContent = obj.content;
				}
				this.show_search = false;
				this.flog = true;
				this.search_list.page = 0;
				this.list = [];
				this.initList();
				
			},
			jumpUrl(code) {
				uni.navigateTo({
					url: '/pages/alarm/fault?id='+code
				});
			},
			initList() {
				let url = this.tab == 1 ? '/home/getPersonalCollectionsList' : '/home/getArmContentList';
				this.fetch('GET',this.baseUrl()+url,this.search_list,true).then((res)=>{
					if(res.returnCode == 1) {
						this.list = this.list.concat(res.data.content);
						this.total = res.data.totalElements;
						this.search_list.page++;
						if(res.data.content.length != 10) this.flog = false;
					}
				})
			},
			setCollect(i,status,code){
				this.fetch('GET',this.baseUrl()+'/home/setAlarmCollect',{armcode:code,iscollection:status == 1 ? 0 : 1,personid:this.getUserId()},true).then((res)=>{
					if(res.returnCode) this.list[i].iscollection = status == 1 ? 0 : 1;
				})
			}
		}
	}
</script>

<style scoped>
	.my-work {
		background: #fff;margin-bottom: 16px;box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.05);
	}
	.my-work>.menu {
		width: 37.5%;color: #3E3A39;line-height: 54px;position: relative;
	}
	.my-work>.menu:nth-child(3) {
		border-left: 1px solid #d7d7d7;width: 25%;
	}
	.my-work>.menu view{
		display: inline-block;
	}
	.my-work>.menu>.on {
		color: #307BE0;border-bottom: 2px solid #307BE0;
	}
	.my-work>.menu>.num {
		position: absolute;top: 10px;right: 20%;background: #FA5151;/* width: 15px; */height: 15px;font-size: 10px;border-radius: 50%;color: #fff;line-height: 14px;padding: 0 5px;
	}
	.select {
		width: 15px;height: 15px;margin-left: 5px;vertical-align: middle;
	}
	.work-item {
		width: 91.5%;margin: 0 auto;
	}
	.work-item>.item {
		/* line-height: 50px; */font-size: 14px;margin-top: 16px;display: flex;align-items: center;justify-content: space-between;padding: 10px 0;background: #FFFFFF;box-shadow: -2px -2px 4px rgba(0, 0, 0, 0.05), 2px 2px 4px rgba(0, 0, 0, 0.05);border-radius: 6px;padding-left: 25px;padding-right: 25px;
	}
	.work-item>.item>.line {
		width: 30px;height: 8px;margin-right: 20px;margin-top: 22px;
	}
	.work-item>.item>.total {
		margin: 0 50px;height: 50px;
	}
	.work-item>.item .icon {
		width: 20px;height: 20px;vertical-align: middle;
	}
	.flex{
		display: flex;width: 60px;line-height: 24px;flex-direction: column;align-items: center;
	}
	.one {
		background: #E93636;
	}
	.two {
		background: #ED983B;
	}
	.three {
		background: #71C76F;
	}
	.four {
		background: #DA8AFF;
	}
</style>
